<template>
    <div class="page">
        <!-- 轮播 -->
        <van-swipe class="swiper" :autoplay="3000" indicator-color="white">
          <!-- v-for="(item, index) in goods.photo" -->
            <van-swipe-item class="swiper-item" v-for="(item,index) in goods.photo"  :key="index"><img :src="item.img" alt=""></van-swipe-item>
        </van-swipe>
        <van-icon @click="goToBack()" class="fang" name="arrow-left" />

        <!-- 抢购 -->
        <div class="qianggou" v-if="time">
            <div class="qianggou-left">
                <span>限时抢购</span>
                <span>限量{{goods.store_nums}}份</span>
            </div>
            <div class="qianggou-right">
                <van-icon name="clock-o" style="margin-right:0.1rem; font-size:0.3rem;"/>
                <span v-if="isTimeing">距离结束只剩</span>
                <count-down :endTime="endTime" :callback="timecallback" endText="活动已经结束了"></count-down>
            </div>
        </div>

        <div class="product-tip">
            <!-- 价格 -->
            <div class="prise">
                <div class="prise-left">
                    <span>￥</span>
                    <span>{{goodsL.price}}</span>
                    <span>￥{{goodsL.market_price}}</span>
                    <span>{{goodsL.num}}人拼团</span>
                </div>
                <div class="prise-right">
                    已拼:{{goodsL.assemble_goods_num}}件
                </div>
            </div>
            <!-- 升级会员 -->
            <!-- <div class="Upgrade" @click="buyVip()">
                <div class="UpgradeContent">
                    <div class="UpgradeContent-left">赚更多</div>
                    <div class="UpgradeContent-middle">升级会员赚<span>￥5.88</span>元起</div>
                    <div class="UpgradeContent-right">立即升级></div>
                </div>
            </div> -->
            <!-- 商品标题 -->
            <div class="productTitle">
                <p>{{goods.name}}</p>
                <p>{{goods.category_name}}</p>
            </div>
        </div>
        <div class="null"></div>
        <div class="oneA1">
          <div class="oneA2">
            <span>{{goodsL.count}}人在拼团，可直接参与</span>
            <span @click="goToGd">查看更多<van-icon name="arrow" /></span>
          </div>
          <div class="oneA3 Onea3">
            <div class="oneA3-left">
              <div class="one-et1">
                <img src="../../assets/tuo-01.png" alt="">
              </div>
              <div class="one-et2">
                awdjisdhgu
              </div>
            </div>
            <div class="oneA3-right">
              <div class="oe3-ih">
                <span>还差<b style="color:#f52e67;">3</b>人成团</span>
                <span>剩余</span>
              </div>
              <div class="oe3-ig1">
                去拼团
              </div>
            </div>
          </div>
          <div class="oneA3">
            <div class="oneA3-left">
              <div class="one-et1">
                <img src="../../assets/tuo-01.png" alt="">
              </div>
              <div class="one-et2">
                awdjisdhgu
              </div>
            </div>
            <div class="oneA3-right">
              <div class="oe3-ih">
                <span>还差<b style="color:#f52e67;">3</b>人成团</span>
                <span>剩余</span>
              </div>
              <div class="oe3-ig1">
                去拼团
              </div>
            </div>
          </div>
        </div>
        <div class="null"></div>
        <div class="oneB1">
            <div class="oneBtit">
              拼团玩法
            </div>
            <div class="oneBcot">
              <div class="oect1">
                <span>1</span>
                <span>开团/参团</span>
              </div>
              <van-icon name="arrow"/>
              <div  class="oect2">
                <span>2</span>
                <span>邀请好友</span>
              </div>
              <van-icon name="arrow"/>
              <div class="oect3">
                <span>3</span>
                <span>满员发货/不满退货</span>
              </div>
            </div>
        </div>
        <div class="null"></div>
        <div class="productChoose">
            <div class="productChoose-item" @click="openJifen">
                <div class="productChoose-item-left">优惠</div>
                <div class="productChoose-item-right">购买可获得{{goods.point}}积分<span>积分</span></div>
            </div>
            <div class="productChoose-item" @click="openChooseGuige">
                <div class="productChoose-item-left" >规格</div>
                <div class="productChoose-item-right">请选择></div>
            </div>
            <!-- <div class="productChoose-item">
                <div class="productChoose-item-left">送至</div>
                <div class="productChoose-item-right">请选择配送区域></div>
            </div> -->
            <div class="serve" @click="openFuwu">
                <div class="serve-item">
                    <span></span>
                    <span>7天内发货</span>
                </div>
                <div class="serve-item">
                    <span></span>
                    <span>正品包邮</span>
                </div>
                <div class="serve-item">
                    <span></span>
                    <span>30天退换</span>
                </div>
                <div class="serve-item">
                    <span></span>
                    <span>满88免邮</span>
                </div>
            </div>
        </div>
        <div class="null"></div>
        <div class="comment" v-if="false">
            <div class="comment-top">
                <span>宝贝评价</span>
                <span>查看全部></span>
            </div>

            <div class="comment-tip">
                <div class="comment-tip-left">
                    <img src="@/assets/1.png" alt="">
                    <span>xxxxxxx</span>
                    <van-rate />
                </div>
                <div class="comment-tip-right">
                    2019-10-1
                </div>

            </div>
            <div class="comment-content">
                    内容内容
            </div>
            <div class="comment-img">
                <img src="@/assets/1.png" alt="">
                <img src="@/assets/1.png" alt="">
                <img src="@/assets/1.png" alt="">
            </div>
            <div class="comment-guige">
                黑色：L
            </div>
        </div>
        <div class="comment" v-else>
            <!-- <div class="comment-top">
                <span>宝贝评价</span>
                <span @click="goToDetails(2)">查看全部></span>
            </div> -->
            <div class="comment-top">
              <span>商品详情</span>
            </div>
            <!-- <div style="text-align:center; padding:0.8rem; color: #B3B5B8;">本商品暂无评价</div> -->
            <div v-html='html' class="details-img-337854828"></div>
        </div>
        <div class="null"></div>
        <div class="tuijian" v-if="hasRecommend">
            <p class="tuijian-title">为您推荐</p>
            <div class="tuijian-all">
                <a class="tuijian-item" v-for="(item, index) in recommend" :key="index" @click="goThisPage(item)">
                    <img :src="item.img" alt="">
                    <p class="tuijian-item-title">{{item.name}}</p>
                    <div class="tuijian-item-bottom">
                        <span>￥{{item.sell_price}}</span>
                        <span>￥{{item.market_price}}</span>
                    </div>
                </a>
            </div>
        </div>
        <!-- <div class="goToDetails" @click="goToDetails(1)">
          点击查看更多详情
        </div> -->
        <div class="goods-action">
            <div class="goods-action-left">
              <div class="goods-action-left-item">
                <img src="../../assets/kefu.png" alt="">
                <div>客服</div>
              </div>
              <!-- <div class="goods-action-left-item" @click="goToShopingCar()">
                <img src="../../assets/gouwuche.png" alt="">
                <div>购物车</div>
              </div> -->
              <div class="goods-action-left-item" @click="collection()">
                <img src="../../assets/shoucang.png" alt="" v-if="goods.is_favorite == 0">
                <img src="../../assets/shoucang2.png" alt="" v-else>
                <div>收藏</div>
              </div>
            </div>
            <div class="goods-action-right" @click="openChooseGuige">
              <div class="goods-action-right-item goods-action-right-item-left" @click="dans">
                <div class="goods-action-right-d">
                  <span style="margin-top:0.2rem;">￥{{goodsL.sell_price}}</span>
                  <span>单独购买</span>
                </div>
              </div>
              <div class="goods-action-right-item goods-action-right-item-right" @click="pings">
                <div class="goods-action-right-d">
                  <span>￥{{goodsL.price}}</span>
                  <span>发起拼团</span>
                </div>
              </div>
            </div>
        </div>
        <!-- 选择产品的规格 -->
        <div class="pruduct-guige" v-if="chhooseguige_show">
            <div class="guige-content">
                <div class="guige-content-top">
                    <div class="guige-content-top-left">
                        <img :src="goods.photo[0].img" alt="">
                        <div class="guige-prise">
                            <p class="guige-prise-number">
                                <span>{{goods.sell_price}}</span>
                                <span>{{goods.market_price}}</span>
                            </p>
                            <p class="kucun">库存：{{goods.store_nums}}</p>
                        </div>
                    </div>
                    <van-icon name="cross" class="cross-icon" @click="closeChooseGuige" />
                </div>

                <div class="pruduct-guige-size" v-if='isProductTwo'>
                    <p>{{Object.values(goods.spec_array)[1].name}}</p>
                    <div class="choosesize">
                        <span v-for="(item, index) in size" :key="index" v-bind:class="index == sizeIndex ? 'choosesize-active' : ''" v-on:click="chooseSize(index)">{{Object.keys(item)[0]}}</span>
                    </div>
                </div>

                <div class="pruduct-guige-color">
                    <p>{{Object.values(goods.spec_array)[0].name}}</p>
                    <div class="choosecolor">
                        <span v-for="(item, index) in color" :key="index" v-bind:class="index == colorIndex ? 'choosecolor-active' : ''"
                              v-on:click="chooseColor(index)">{{Object.keys(item)[0]}}</span>
                    </div>
                </div>

                <div class='product-shuliang'>
                    <span>数量</span>
                    <van-stepper v-model="count" :max="goods.store_nums" />
                </div>
                <div class="pay-button">
                    <a @click="addShopingCar()">加入购物车</a>
                    <a @click="goOder()">立即购买</a>
                </div>
            </div>
        </div>

        <!--单规格商品弹窗-->
        <div class="pruduct-guige" v-if="danGuiGe">
                <div class="guige-content">
                <div class="guige-content-top">
                    <div class="guige-content-top-left">
                        <img :src="goods.photo[0].img" alt="">
                        <div class="guige-prise">
                            <p class="guige-prise-number">
                                <span>{{goods.sell_price}}</span>
                                <span>{{goods.market_price}}</span>
                            </p>
                            <p class="kucun">库存：{{goods.store_nums}}</p>
                        </div>
                    </div>
                    <van-icon name="cross" class="cross-icon" @click="closeChooseGuige" />
                </div>

                <div class='product-shuliang'>
                    <span>数量</span>
                    <van-stepper v-model="count" :max="goods.store_nums" />
                </div>
                <div class="pay-button">
                    <a @click="addShopingCar()">加入购物车</a>
                    <a @click="goOder()">立即购买</a>
                </div>
            </div>
        </div>
        <!--单规格商品选数量结束-->
        <!-- 积分弹窗 -->
        <div class="pruduct-youhui" v-if="jifen_show">
            <div class="youhui-content">
                <div class="youhui-content-top">
                    <div class="guige-null"></div>
                    <div class="">优惠</div>
                    <van-icon name="cross" class="cross-icon"  @click="closeJifen"/>
                </div>
                <div class="youhui-content-bottom">
                    <img src="@/assets/jifen.png" alt="">
                    <p>购买可获得<span>{{goods.point}}</span>积分</p>
                    <p>积分介绍信息，积分介绍信息</p>
                </div>
            </div>
        </div>
        <!-- 服务保障弹窗 -->
        <div class="pruduct-fuwu"  v-if="fuwubaozhang_show">
            <div class="fuwu-content">
                <div class="fuwu-content-top">
                    <div class="guige-null"></div>
                    <div class="">服务保障</div>
                </div>
                <div class="fuwu-all">
                    <div class="fuwu-item">
                        <div class="fuwu-item-top">
                            <span></span>
                            <span>7天内发货</span>
                        </div>
                        <div class="fuwu-item-bottom">积分介绍信息，积分介绍信息</div>
                    </div>
                    <div class="fuwu-item">
                        <div class="fuwu-item-top">
                            <span></span>
                            <span>正品包邮</span>
                        </div>
                        <div class="fuwu-item-bottom">积分介绍信息，积分介绍信息</div>
                    </div>
                    <div class="fuwu-item">
                        <div class="fuwu-item-top">
                            <span></span>
                            <span>30天退换</span>
                        </div>
                        <div class="fuwu-item-bottom">积分介绍信息，积分介绍信息</div>
                    </div>
                    <div class="fuwu-item">
                        <div class="fuwu-item-top">
                            <span></span>
                            <span>满88包邮</span>
                        </div>
                        <div class="fuwu-item-bottom">积分介绍信息，积分介绍信息</div>
                    </div>
                </div>
                <div class="fuwu-button" @click="closeFuwu">
                    完成
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import request from '../../../static/request.js'
    import Qs from 'qs'
    import {Notify} from 'vant';
    import {Dialog} from 'vant';

    import countDown from '@/components/daojishi/daojishi'

    export default {
        name: "Group-details",
        data() {
            return {
                goodsId: '', // 单规格商品ID或商品原始ID
                goodsProductId: '', // 多规格商品ID
                isProduct: true, // 判断是否是多规格商品
                isProductTwo: false, // 判断是否是多规格商品二
                count: 1, // 商品数量
                chhooseguige_show: false, //选择规格是否显示
                danGuiGe: false, // 无规格商品选择规格是否显示
                jifen_show: false, //积分窗口是否显示
                fuwubaozhang_show: false,
                goods: {},
                recommend: [], //为你推荐
                buyLimit: 1, // 商品购买限制
                goodsL:[],    //当前拼团商品详情

                color: [],
                colorIndex: 0, // 动态设置CLASS
                size: [],
                sizeIndex: 0, // 动态设置CLASS

                // 多规格商品二
                goodsProductArr: [],

                // 多规格商品一
                productOne: [],

                page: 0,

                // 商品规格 0 单规格 1 多规格
                goodsProduct: null,

                //商品详情
                html: null,

                /**
                 * 以下为活动类型判断
                 */
                time: false, //抢购活动
                isTimeing: true, //活动是否进行中
                endTime: 0,

                hasRecommend: true,
                pinDan: 0, // 发起拼团1、单独购买0
            }
        },
        created() {
            // 通过url获取ID，或者通过路由获取商品ID
            let data = this.getUrlParam(window.location.href)
            let id = null
            if (Object.keys(data).length == 0) {
                id = this.$route.params.id
            } else {
                id = data.id
            }

            this.page = this.$route.params.page;

            // 返回或刷新也有数据
            if (!id) {
                id = localStorage.getItem('getthisid')
            }
            localStorage.setItem('getthisid', id)

            // 获取商品详情数据
            this.getGoodsInfo(id)
            // 当前商品拼团列表
            this.getList(id)
            // 获取当前拼团商品的详细信息
            this.getinfo(id)
            // 获取为您推荐数据
            request({
                url: '?controller=theapi3&action=assembleGoods',
                method: 'get',
            }).then(res => {
                console.log(res)
                    // 推荐商品不存在
                if (res.data.data == 0) {
                    this.hasRecommend = false
                    return
                }
                let data = res.data.data
                data.forEach(item => {
                    if (item.name.length > 13) {
                        item.name = item.name.slice(0, 18) + '...'
                    }
                })
                this.recommend = data
            }).catch(err => {
                console.log(err)
            })
            let tguiG = this.$route.params;
            this.backG(tguiG);
        },
        updated() {
            window.scrollTo(0, 0)
        },

        // 方法
        methods: {
            // 参与拼团后的规格选择
            backG(m){
              if(m.tChan){
                this.chhooseguige_show = m.tChan;
              }
            },
            // 拼团商品更多 列表
            goToGd(){
              this.$router.push('Group-list')
            },
            // 拼团
            pings() {
                this.chhooseguige_show = true;
                this.pinDan = 1;
            },
            // 单独购买
            dans() {
                this.chhooseguige_show = true;
                this.pinDan = 0;
            },
            goToBack() {
                // if(this.page == 1){
                //   this.$router.push('/');
                // }else if(this.page == 2){
                //   this.$router.push('/Mall');
                // }else{
                //   this.$router.push('/');
                // }
                this.$router.go(-1)
            },
            //  获取当前拼团商品的详细信息
            getinfo(id){
              request({
                  url: '?controller=theapi3&action=assemblesGoodsDetail',
                  method: 'get',
                  params: {
                      gid: id
                  }
              }).then(res => {
                this.goodsL = res.data.data;
                console.log(this.goodsL)
              })
            },
            // 获取详细的商品信息
            getGoodsInfo(id) {
                console.log(id);
                request({
                    // url: '?controller=theapi3&action=assemblesGoodsDetail',
                    url: '?controller=theapi&action=goods',
                    method: 'get',
                    params: {
                        gid: id
                    }
                }).then(res => {
                    console.log(res)
                        // 判断商品活动是否失效 hank用户时差
                        if(res.data.data == ''){
                          if(res.data.return_message == '这件商品不存在或已下架'){
                            Dialog.alert({
                              title: '提示',
                              message: '该商品已下架'
                            }).then(() => {
                        this.$router.back()
                              this.$router.push('Mall')
                            });
                          }else if(res.data.return_message == '团购活动不存在'){
                            Dialog.alert({
                              title: '提示',
                              message: '团购活动已结束'
                            }).then(() => {
                        //       //this.$router.back()
                              this.$router.push('Mall')
                            });
                          }
                        }
                    console.log(res)
                        let guige = res.data.data.spec_array
                        let arr = []
                        let arr2 = [{},{}]
                        // 单规格商品
                        if(guige == null){
                          this.isProduct = false;
                          this.goodsProduct = 0;
                          this.goods = res.data.data
                          this.goodsProductId = res.data.data.id
                          this.html = res.data.data.content
                          return
                        }

                    // 多规格
                    console.log('多规格商品')
                    this.goodsProduct = 1;
                    Object.values(guige).forEach(item=>{
                      arr.push(item)
                    })
                    console.log(arr);
                    arr.forEach((item, index)=>{
                      arr2[index].id= item.id
                      arr2[index].type = item.type
                      arr2[index].value = Object.values(item.value[0])[0]
                      arr2[index].name = item.name
                      arr2[index].tip = Object.keys(item.value[0])[0]
                    })
                    console.log(arr2);
                    // 多规格商品默认选中第一
                    this.goodsProductArr = arr2

                    this.color = arr[0].value
                    // 判断是否有两个规格
                    if(arr.length == 2){
                      this.isProductTwo = true
                      this.size = arr[1].value
                    }
                    this.goods = res.data.data
                    console.log(res.data.data);
                    // console.log('111')
                    this.goodsId = res.data.data.id
                    this.html = res.data.data.content

                    // 请求多规格商品的价格与ID
                    this.getProduct(arr2)
                })
            },
            // 获取当前商品的拼团列表
            getList(id){
                request({
                    url: '?controller=theapi3&action=getAssembles',
                    method: 'get',
                    params: {
                        gid: id,
                        page: 1,
                        pagesize: 5
                    }
                }).then(res => {
                    console.log(res)
                })
            },
            // 购买VIP
            buyVip() {
                window.location.href = 'http://app.ztsx123.com/1/#/fourteen'
            },
            // 打开规格弹窗
            openChooseGuige() {
                if (this.goodsProduct == 0) {
                    this.danGuiGe = true
                } else if (this.goodsProduct == 1) {
                    this.chhooseguige_show = true
                }
            },
            // 关闭规格弹窗
            closeChooseGuige() {
                this.chhooseguige_show = false,
                    this.danGuiGe = false,
                    this.danGuiGe = false
            },
            // 收藏与取消收藏
            collection() {
                let uri, message, is_favorite
                if (this.goods.is_favorite == 0) {
                    // 未收藏请求收藏
                    uri = '?controller=theapi&action=favourite_add'
                    message = '收藏成功'
                    is_favorite = 1
                } else {
                    uri = '?controller=theapi&action=refuse_favourite'
                    message = '取消收藏'
                    is_favorite = 0
                }
                request({
                    url: uri,
                    method: 'get',
                    params: {
                        gid: this.goodsId
                    }
                }).then(res => {
                    if (res.data.data == '请先登录') {
                        Dialog.alert({
                            message: '请先登录'
                        }).then(() => {
                            //this.$router.back()
                            this.$router.push('login')
                        });
                    } else {
                        this.goods.is_favorite = is_favorite
                        Notify({
                            message: message,
                            duration: 1000,
                            background: '#F52E67'
                        })
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            goToShopingCar() {
                this.$router.push({
                    name: 'ShoppingCart'
                })
            },
            // 打开积分弹窗
            openJifen() {
                this.jifen_show = true
            },
            // 关闭积分弹窗
            closeJifen() {
                this.jifen_show = false
            },
            // 打开积分弹
            openFuwu() {
                this.fuwubaozhang_show = true
            },
            // 关闭积分弹窗
            closeFuwu() {
                this.fuwubaozhang_show = false
            },

            // 选择颜色
            chooseColor(index) {
                this.colorIndex = index
                let color = this.color
                let arr = this.goodsProductArr
                let goodsId = this.goodsId

                // arr[0]['specJSON[0][value]'] = Object.values(color[index])[0]
                // arr[0]['specJSON[0][tip]'] = Object.keys(color[index])[0]

                arr[0].value = Object.values(color[index])[0]
                arr[0].tip = Object.keys(color[index])[0]

                this.getProduct(arr)
            },
            // 选择尺码
            chooseSize(index) {
                this.sizeIndex = index
                let size = this.size
                let arr = this.goodsProductArr
                let goodsId = this.goodsId

                arr[1].value = Object.values(size[index])[0]
                arr[1].tip = Object.keys(size[index])[0]

                this.getProduct(arr)
            },

            // 上拉查看商品详情,或进入到评论
            goToDetails(sign) {
                this.$router.push({
                    name: 'ProductMore',
                    params: {
                        content: this.goods.content,
                        sign: sign
                    }
                })
            },
            // 抢购倒计时结束的回调
            timecallback() {
                console.log('已结束')
                this.isTimeing = false
            },

            // 立即购买
            goOder() {
                if (this.count < this.buyLimit) {
                    this.$dialog.alert({
                        title: "提示", //加上标题
                        message: `商品${this.buyLimit}件起购`, //改变弹出框的内容
                        showCancelButton: true //展示取水按钮
                    }).then(() => {
                        return
                    })
                }
                // 判断是否是多规格商品
                if (this.isProduct) {
                  console.log(this.goodsProductId)
                    this.$router.push({
                        name: 'order1',
                        params: {
                            gid: this.goodsProductId,
                            type: 'product',
                            num: this.count,
                            pinD: this.pinDan,
                            pric:this.goodsL.price
                        }
                    })
                } else {
                  console.log(this.goodsProductId)
                    // 单规格
                    console.log({
                        gid: this.goodsProductId,
                        type: 'goods',
                        num: this.count,
                        pinD: this.pinDan,
                        pric:this.goodsL.price
                    })
                    this.$router.push({
                        name: 'order1',
                        params: {
                            gid: this.goodsProductId,
                            type: 'goods',
                            num: this.count,
                            pinD: this.pinDan,
                            pric:this.goodsL.price
                        }
                    })
                }
            },
            //加入购物车
            addShopingCar() {
                if (this.count < this.buyLimit) {
                    this.$dialog.alert({
                        title: "提示", //加上标题
                        message: `商品${this.buyLimit}件起购`, //改变弹出框的内容
                        showCancelButton: true //展示取水按钮
                    }).then(() => {
                        return
                    })
                }
                // 判断是否是多规格商品
                if (this.isProduct) {
                    // 多规格
                    request({
                        url: '?controller=theapi&action=joinCart',
                        method: 'get',
                        params: {
                            goods_id: this.goodsProductId,
                            goods_num: this.count,
                            type: 'product'
                        }
                    }).then(res => {
                        if (res.data.data == '请登录') {
                            Dialog.alert({
                                message: '请先登录'
                            }).then(() => {
                                //this.$router.back()
                                this.$router.push('login')
                            });
                        } else {
                            Notify({
                                message: '加入购物车成功',
                                duration: 1000,
                                background: '#F52E67'
                            })
                        }
                    })
                } else {
                    // 单规格
                    request({
                        url: '?controller=theapi&action=joinCart',
                        method: 'get',
                        params: {
                            goods_id: this.goodsProductId,
                            goods_num: this.count,
                            type: 'goods'
                        }
                    }).then(res => {
                        Notify({
                            message: '加入购物车成功',
                            duration: 1000,
                            background: '#F52E67'
                        })
                    })
                }
            },
            // 为你推荐请求
            goThisPage(item) {
                this.getGoodsInfo(item.id)
                this.getinfo(item.id)
            },

            // 获取多规格商品价格与ID
            getProduct(arr) {
                let data = {}
                let arr2 = []

                // 倒排序，hank 后台
                arr2.push(arr[1])
                arr2.push(arr[0])

                if (this.isProductTwo) {
                    data.specJSON = arr2
                } else {
                    data.specJSON = arr2.splice(1, 1);
                }
                data.goods_id = this.goodsId
                data = Qs.stringify(data)
                request({
                    url: '?controller=theapi&action=getProduct',
                    method: 'post',
                    data: data,
                    header: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    } // 模拟form表单方式提交请求
                }).then(res => {
                    console.log(res)
                    this.goodsProductId = res.data.data.id
                    this.goods.market_price = res.data.data.market_price
                    this.goods.sell_price = res.data.data.sell_price
                    this.goods.store_nums = res.data.data.store_nums
                })
            },
            // 获取URL传过来的参数
            getUrlParam(sUrl, sKey) {
                var result = {}
                sUrl.replace(/\??(\w+)=(\w+)&?/g, function(all, key, value) {

                    if (result[key] !== void 0) {
                        var t = result[key]
                        result[key] = [].concat(t, value)
                    } else {
                        result[key] = value
                    }
                })
                if (sKey === void 0) {
                    return result;
                } else {
                    return result[sKey] || ''
                }
            }
        },
        // 注册组件
        components: {
            countDown
        }
    };
</script>

<style>
    /*商品详情图片*/

    .details-img-337854828 {
        width: 100%;
    }

    .details-img-337854828 img {
        display: block;
        width: 100%;
    }
    /*商品详情图片*/
</style>

<style scoped>
    .null {
        background: #F5F6F7;
        height: 0.2rem;
    }
    /* 轮播图 */

    .swiper {
        height: 6.5rem;
    }

    .swiper-item {
        background: #ffffff;
        color: white
    }

    .swiper-item img {
        width: 100%;
    }
    /* 抢购 */

    .qianggou {
        margin: 0.2rem 0.3rem -0.1rem 0.3rem;
        display: flex;
        height: 1rem;
        justify-content: space-between;
        align-items: center;
        background-image: url(../../assets/qianggou.png);
        background-size: 100% 100%;
    }

    .qianggou-left {
        margin-left: 0.35rem;
    }

    .qianggou-left span:nth-child(1) {
        color: white;
        font-size: 0.3rem;
    }

    .qianggou-left span:nth-child(2) {
        color: white;
        font-size: 0.28rem;
    }

    .qianggou-right {
        display: flex;
        align-items: center;
        margin-right: 0.2rem;
        color: white;
        font-size: 0.26rem;
    }
    /* 价格 */

    .fang {
        position: absolute;
        font-size: 0.4rem;
        top: 0.23rem;
        left: 0.2rem;
        width: 0.5rem;
        height: 0.9rem;
        /* z-index: 111; */
    }

    .product-tip {
        /* padding: 0.5rem 0.3rem; */
        /* padding-top:0.1rem; */
    }

    .prise {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 1rem;
        /* margin-top: 0.35rem; */
    }

    .prise-left {
        background: #000;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        width: 65%;
        padding: 0 0.35rem;
    }

    .prise-left span:nth-child(1) {
        color: #fff;
        font-size: 0.3rem;
    }

    .prise-left span:nth-child(2) {
        color: #fff;
        font-size: 0.35rem;
    }

    .prise-left span:nth-child(3) {
        color: #B3B5B8;
        font-size: 0.26rem;
        text-decoration: line-through;
        margin-left: 0.2rem;
    }

    .prise-left span:nth-child(4) {
        background: #F52E67;
        color: white;
        font-size: 0.25rem;
        border-radius: 0.2rem;
        padding: 0.05rem 0.2rem;
        margin-left: 0.2rem;
    }

    .prise-right {
        height: 1rem;
        width: 35%;
        color: #FFF;
        font-size: 0.27rem;
        background: #f00;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /* 升级会员 */

    .Upgrade {
        margin-top: 0.3rem;
    }

    .UpgradeContent {
        height: 1rem;
        background: #EBC993;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0.2rem;
        border-radius: 0.16rem;
    }

    .UpgradeContent-left {
        color: white;
        font-size: 0.26rem;
        width: 1.11rem;
        line-height: 0.45rem;
        text-align: center;
        background: #F6E3BE;
        border-radius: 23px;
    }

    .UpgradeContent-middle {
        color: #412A00;
        font-size: 0.28rem;
        margin-left: -1rem;
    }

    .UpgradeContent-middle span {
        color: #F52E67
    }

    .UpgradeContent-right {
        color: #412A00;
        font-size: 0.26rem;
    }
    /* 商品标题 */

    .productTitle {
        margin-top: 0.2rem;
    }

    .productTitle p:nth-child(1) {
        color: #191E2A;
        font-size: 0.3rem;
        margin-left: 0.25rem;
    }

    .productTitle p:nth-child(2) {
        color: #B3B5B8;
        font-size: 0.28rem;
        margin: 0.1rem 0;
        margin-left: 0.25rem;
    }
    /* 选择规格 */

    .productChoose {
        padding-left: 0.3rem;
    }

    .productChoose-item {
        display: flex;
        align-items: center;
        height: 0.9rem;
        justify-content: space-between;
        padding: 0 0.2rem 0 0;
        border-bottom: 0.01rem solid #EFF1F3;
    }

    .productChoose-item-left {
        font-size: 0.28rem;
        color: #191E2A;
    }

    .productChoose-item-right {
        font-size: 0.28rem;
        color: #9FA0A5;
    }

    .productChoose-item-right span {
        font-size: 0.2rem;
        color: #fff;
        background: #F52E67;
        padding: 0 0.1rem;
        margin-left: 0.2rem;
    }
    /* 服务 */

    .serve {
        display: flex;
        padding: 0.3rem 0.3rem 0.3rem 0;
        justify-content: space-between;
        font-size: 0.28rem;
    }

    .serve-item {
        display: flex;
        align-items: center;
    }

    .serve-item span:nth-child(1) {
        width: 0.1rem;
        height: 0.1rem;
        background: #F52E67;
        margin-right: 0.1rem;
    }
    /* 评论 */

    .comment {
        padding: 0.3rem;
    }

    .comment-top {
        display: flex;
        justify-content: space-between;
    }

    .comment-top span:nth-child(1) {
        font-size: 0.28rem;
        color: #191E2A;
    }

    .comment-top span:nth-child(2) {
        font-size: 0.28rem;
        color: #9FA0A5;
    }

    .comment-tip {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.7rem;
    }

    .comment-tip-left {
        display: flex;
        align-items: center;
    }

    .comment-tip-left img {
        width: 0.56rem;
        height: 0.56rem;
        display: flex;
        align-items: center;
    }

    .comment-tip-left span:nth-child(2) {
        margin-left: 0.2rem;
        margin-right: 0.2rem;
    }

    .comment-content {
        font-size: 0.28rem;
        padding: 0.2rem 0;
    }

    .comment-img {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .comment-img img {
        width: 2.1rem;
        height: 2.1rem;
    }

    .comment-guige {
        margin-top: 0.30rem;
        width: 1.15rem;
        height: 0.3rem;
        line-height: 0.3rem;
        background: #EFF0F1;
        color: #CCCED0;
        text-align: center;
        border-radius: 0.05rem;
    }
    /* 推荐 */

    .tuijian {
        padding: 0.3rem 0 0.3rem 0.3rem;
        margin: 0 0 0.98rem 0;
    }

    .tuijian-title {
        font-size: 0.28rem;
    }

    .tuijian-all {
        margin: 0.3rem 0.3rem 0 0;
        display: flex;
        white-space: nowrap;
        overflow-x: auto;
    }

    .tuijian-item {
        display: block;
        white-space: normal;
        border: 1px solid #e6e6e6;
        width: 2.6rem;
        margin-right: 0.3rem;
        border-radius: 0.2rem;
    }

    .tuijian-item img {
        width: 2.6rem;
        height: 2.1rem;
        border-top-left-radius: 0.2rem;
        border-top-right-radius: 0.2rem;
    }

    .tuijian-item-title {
        padding: 0.1rem;
    }

    .tuijian-item-bottom {
        display: flex;
        justify-content: space-between;
        padding: 0 0.1rem 0.2rem 0.1rem;
    }

    .tuijian-item-bottom span:nth-child(1) {
        font-size: 0.24rem;
        color: #F52E67;
    }

    .tuijian-item-bottom span:nth-child(2) {
        font-size: 0.24rem;
        color: #B3B5B8;
        text-decoration: line-through;
    }

    .goToDetails {
        margin-bottom: 0.98rem;
        text-align: center;
        padding: 0.42rem 0;
        color: #B3B5B8;
        background: #F5F6F7;
    }
    /*底部购物导航*/

    .goods-action {
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        width: 100%;
        height: 0.98rem;
        justify-content: space-between;
        align-items: center;
        background: #ffffff;
    }

    .goods-action-left {
        display: flex;
        height: 0.98rem;
        width: 30%;
        justify-content: space-between;
        align-items: center;
    }

    .goods-action-left-item {
        width: 33.333333%;
        text-align: center;
        font-size: 0.18rem;
        margin: 0 0.3rem;
    }

    .goods-action-right {
        display: flex;
        width: 70%;
        height: 0.98rem;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
    }

    .goods-action-right-item {
        width: 50%;
        height: 0.98rem;
        text-align: center;
        line-height: 0.98rem
    }

    .goods-action-right-item {
        width: 50%;
        height: 0.98rem;
        text-align: center;
        color: #ffffff;
    }

    .goods-action-right-item-left {
        line-height: 0.98rem;
        background: #22262F;
        font-size: 0.28rem;
    }

    .goods-action-right-item-right {
        background: #FF5367;
        display: flex;
        justify-content: center;
        /* 水平居中 */
        align-items: center;
        /* 垂直居中 */
    }

    .goods-action-right-d span {
        display: block;
        line-height: 0.28rem;
    }

    .goods-action-right-d span:first-of-type {
        font-size: 0.28rem;
    }

    .goods-action-right-d span:last-of-type {
        margin-top: 0.06rem;
        font-size: 0.14rem;
    }
    /* 选择产品规格弹窗 */

    .pruduct-guige {
        position: fixed;
        z-index: 99;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5)
    }

    .guige-content {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 9.4rem;
        background: #fff;
        border-top-left-radius: 0.2rem;
        border-top-right-radius: 0.2rem;
    }

    .guige-content-top {
        padding: 0.3rem;
        padding-bottom: 0;
        display: flex;
        justify-content: space-between;
    }

    .guige-content-top img {
        width: 2.28rem;
        height: 2.28rem;
    }

    .guige-content-top-left {
        display: flex;
        align-items: center;
    }

    .cross-icon {
        font-weight: 600;
        font-size: 0.4rem;
        color: #D9DBE0;
    }

    .guige-prise {
        margin-left: 0.43rem;
    }

    .guige-prise-number span:nth-child(1) {
        font-size: 0.34rem;
        color: #F52E67
    }

    .guige-prise-number span:nth-child(2) {
        font-size: 0.26rem;
        color: #B3B5B8;
        text-decoration: line-through;
        margin-left: 0.2rem;
    }

    .kucun {
        font-size: 0.3rem;
        color: #B3B5B8;
    }
    /* 选择颜色 */

    .pruduct-guige-color {
        padding: 0 0.3rem;
        font-size: 0.28rem;
        margin-top: 0.3rem;
    }

    .choosecolor {
        margin-top: 0.2rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .choosecolor span {
        display: inline-block;
        margin: 0 0.5rem 0 0;
        width: 1.5rem;
        height: 0.56rem;
        line-height: 0.56rem;
        border-radius: 0.1rem;
        color: white;
        background: #E3E2E2;
        font-size: 0.28rem;
        text-align: center;
        margin-bottom: 0.1rem;
    }

    .choosecolor-active {
        color: white !important;
        background: #F52E67 !important;
    }
    /* 选择尺码 */

    .pruduct-guige-size {
        padding: 0 0.3rem;
        font-size: 0.28rem;
        margin-top: 0.3rem;
    }

    .choosesize {
        margin-top: 0.2rem;
    }

    .choosesize span {
        display: inline-block;
        margin: 0 0.5rem 0 0;
        width: 1.5rem;
        height: 0.56rem;
        line-height: 0.56rem;
        border-radius: 0.1rem;
        font-size: 0.28rem;
        text-align: center;
        margin-bottom: 0.1rem;
        border: 1px solid #e6e6e6;
        color: #C9CACC;
    }

    .choosesize-active {
        color: #F52E67 !important;
        border-color: #F52E67 !important;
    }

    .product-shuliang {
        display: flex;
        justify-content: space-between;
    }

    .product-shuliang {
        margin-top: 0.5rem;
        padding: 0 0.3rem;
        font-size: 0.28rem;
    }
    /* 购买按钮 */

    .pay-button {
        position: fixed;
        display: flex;
        width: 100%;
        bottom: 0;
        height: 1rem;
    }

    .pay-button a {
        line-height: 1rem;
        text-align: center;
        font-size: 0.28rem;
    }

    .pay-button a:nth-child(1) {
        flex: 1;
        background: #2D3540;
        color: white;
    }

    .pay-button a:nth-child(2) {
        flex: 1;
        background: #F52E67;
        color: white;
    }
    /* 优惠弹窗 */

    .pruduct-youhui {
        position: fixed;
        z-index: 99;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5)
    }

    .youhui-content {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 5.66rem;
        background: #fff;
        border-top-left-radius: 0.2rem;
        border-top-right-radius: 0.2rem;
    }

    .youhui-content-top {
        height: 0.8rem;
        line-height: 0.8rem;
        font-size: 0.32rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.3rem;
        border-bottom: 1px solid #e6e6e6;
    }

    .youhui-content-bottom {
        text-align: center;
    }

    .youhui-content-bottom img {
        width: 2.4rem;
        height: 2.2rem;
    }

    .youhui-content-bottom p:nth-child(2) {
        font-size: 0.3rem;
    }

    .youhui-content-bottom p:nth-child(2) span {
        color: #F52E67
    }

    .youhui-content-bottom p:nth-child(3) {
        font-size: 0.3rem;
        margin-top: 0.25rem;
        color: #B3B5B8
    }
    /* <!-- 服务保障弹窗 --> */

    .pruduct-fuwu {
        position: fixed;
        z-index: 99;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5)
    }

    .fuwu-content {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 8.71rem;
        background: #fff;
        border-top-left-radius: 0.2rem;
        border-top-right-radius: 0.2rem;
    }

    .fuwu-content-top {
        height: 0.8rem;
        line-height: 0.8rem;
        font-size: 0.32rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.3rem;
        border-bottom: 1px solid #e6e6e6;
    }

    .fuwu-all {
        padding: 0.3rem;
        font-size: 0.3rem;
    }

    .fuwu-item {
        margin-bottom: 0.5rem;
    }

    .fuwu-item-top {
        display: flex;
        align-items: center;
    }

    .fuwu-item-top span {
        display: inline-block;
    }

    .fuwu-item-top span:nth-child(1) {
        width: 0.1rem;
        height: 0.1rem;
        background: #F52E67;
        margin-right: 0.1rem;
    }

    .fuwu-item-bottom {
        color: #B3B5B8;
        font-size: 0.28rem;
    }

    .fuwu-button {
        height: 1.8rem;
        text-align: center;
        line-height: 1.45rem;
        font-size: 0.32rem;
        color: white;
        background-image: url(../../assets/button.png);
        background-size: 100% 100%;
    }
    /* 拼团 */
    .oneA1{
      width: 100%;
      height: 3.4rem;
      position: relative;
    }
    .oneA2{
      width: 100%;
      height: 0.9rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 0.01rem solid #eff1f3;
    }
    .oneA2 span{
      display: flex;
      align-items: center;
      margin: 0 .25rem;
      font-size: 0.25rem;
    }
    .oneA2 span:nth-child(2){
      color: #9fa0a5;
    }
    .oneA3{
      width: 90%;
      height: 1.25rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-left: 10%;
    }
    .Onea3{
      border-bottom: 0.01rem solid #eff1f3;
    }
    .oneA3-left,.oneA3-right{
      display: flex;
    }
    .oneA3-right{
      align-items: center;
    }
    .oe3-ih{
      display: flex;
      flex-direction: column;
      font-size: 0.25rem;
    }
    .oe3-ig1{
      width: 1.2rem;
      height: 0.6rem;
      background: #f00;
      margin: 0 0.25rem;
      border-radius: 0.12rem;
      text-align: center;
      line-height: 0.6rem;
      color: #fff;
      font-size: 0.25rem;
    }
    .one-et1{
      width: 0.45rem;
      height: 0.45rem;
    }
    .one-et2{
      height: 100%;
      margin-left: 0.1rem;
      font-size: 0.27rem;
      font-weight: bold;
    }
    .one-et1 img{
      width: 100%;
      height: 100%;
    }
    /* 拼团玩法 */
    .oneB1{
      width: 100%;
      height: 2.66rem;
    }
    .oneBtit{
      width: 100%;
      height: 0.8rem;
      border-bottom: 0.01rem solid #ccc;
      font-size: 0.27rem;
      font-weight: bold;
      line-height: 0.8rem;
      text-indent: 1em;
    }
    .oneBcot{
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .oneBcot div{
      display: flex;
      flex-direction: column;
    }
    .oneBcot div span:nth-child(1){
      display: inline-block;
      width: 0.44rem;
      height: 0.44rem;
      background: #000;
      border-radius: 50%;
      color: #fff;
      text-align: center;
      line-height: 0.44rem;
      margin: 0.3rem auto;
      margin-top: 0.35rem;
    }
    .oneBcot div span:nth-child(2){
      font-size: 0.25rem;
      color: #ccc;
    }
</style>
